$(() => {
    let users = []

    //渲染用户列表函数
    function renderUsersList() {
        const html = template('userListTpl', { data: users })
        $('#userListBox').html(html)
    }
    //渲染用户添加表单
    function renderAddUserForm() {
        const html = template('addUserFormTpl')
        $('#formBox').html(html)
    }
    renderAddUserForm()
    //用户列表展示
    $.ajax({
        type: 'get',
        url: '/users',
        success(res) {
            users = res
            renderUsersList()
        },
        error() {
            console.log('获取用户信息失败!');

        }
    })

    // 图片上传
    $('#formBox').on('change', '#avatar', function () {
        const formData = new FormData()
        formData.append('avatar', this.files[0])
        $.ajax({
            type: 'post',
            url: '/upload',
            data: formData,
            processData: false,
            contentType: false,
            success(res) {
                $('#preview').attr('src', res[0].avatar)
                $('#hiddenForm').val(res[0].avatar)
            }
        })
    })

    //添加用户表单提交
    $('#addUserForm').on('submit', function () {
        const formData = $(this).serialize()
        $.ajax({
            type: 'post',
            url: '/users',
            data: formData,
            success(res) {
                users.unshift(res)
                renderUsersList()
                $('#addUserForm')[0].reset()
                $('#preview').attr('src', '../assets/img/default.png')
            },
            error(res) {
                alert(JSON.parse(res.responseText).message)
            }
        })
        return false
    })


    //编辑点击事件
    $('#userListBox').on('click', '#editBtn', function (e) {
        //通过自定义属性获得id  $(this).attr('data-id')
        //通过事件对象获得id
        const id = e.target.dataset.id
        $.ajax({
            type: 'get',
            url: `/users/${id}`,
            success(res) {
                const html = template('editUserFormTpl', res)
                $('#formBox').html(html)
            },
            error() {
                alert('查找用户信息失败!')
            }
        })
    })
    //编辑表单取消按钮
    $('#formBox').on('click', '#cancelBtn', function () {
        renderAddUserForm()
    })
    //编辑表单提交事件
    $('#formBox').on('submit', '#editUserForm', function () {
        const id = $(this).attr('data-id')
        // console.log(id);
        const formData = $(this).serializeArray()
        const objData = {}
        formData.forEach((v) => {
            objData[v.name] = v.value
        })

        $.ajax({
            type: 'put',
            url: `/users/${id}`,
            data: objData,
            success(res) {
                let user = users.find((v) => { return v._id === id })
                Object.assign(user, objData)
                renderAddUserForm()
                renderUsersList()
            },
            error() {
                alert('修改失败!')
            }
        })
        return false
    })

    //删除用户
    $('#userListBox').on('click', '#delBtn', function (e) {
        const id = e.target.dataset.id
        const result = confirm('您确定要删除吗?')
        if (!result) { return }
        $.ajax({
            type: 'delete',
            url: `/users/${id}`,
            success(res) {
                const index = users.findIndex((v) => {
                    return v._id === id
                })
                users.splice(index, 1)
                renderUsersList()
            },
            error() {
                alert('删除失败!')
            }
        })
    })

    //全选框状态
    $('#selectAll').on('change', function () {
        const status = $(this).prop('checked')
        $('#userListBox').find('input').prop('checked', status)
    })

    //单选框状态
    $('#userListBox').on('change', '#selectSingle', function () {
        const input = $('#userListBox').find('input')
        // input.filter(':checked') 过滤出所有选中的复选框
        $('#selectAll').prop('checked', input.length === input.filter(':checked').length)
        const inputs = input.filter(':checked')
        const inputsAry = Array.from(inputs)
        const ids = []
        inputsAry.forEach((v) => {
            ids.push(v.dataset.id)
        })
        idsStr = ids.join('-')

    })
    $('#deleteBatch').on('click', function () {
        $.ajax({
            type: 'delete',
            url: `/users/${idsStr}`,
            success(res) {
                const userIds = []
                res.map((v) => {
                    return userIds.push(v._id)
                })
                // includes方法只能检测字符串和数字类型的数据
                users = users.filter((v) => {
                    return !userIds.includes(v._id)
                })
                renderUsersList()
            },
            error() {
                alert('删除失败!')
            }
        })
    })
})